<template>
    <div id="operationPayrollTitle">
        <!-- 头部 -->
        <el-page-header @back="goBack" title="">
                <template #content>
                    <div class="operationPayrollTitle-content">
                        <div>
                            {{title}}
                        </div>
                    
                        <div>
                            <el-button type="primary" @click="btnFn(index)" v-for="(item,index) in btnArr" :key="index">{{item}}</el-button>
                        </div>
                    </div>
                </template>
        </el-page-header>
    </div>
</template>

<script>
export default {
    props:["title","btnArr","fn","myIndex"],
    methods: { 
        // 右箭头返回按钮
        goBack() {
            this.$router.go(-1)
        },

        btnFn(index){
            if(this.myIndex == index){
                this.fn()
            }
        }
    },
}
</script>

<style lang="less" scoped>
#operationPayrollTitle{
    background-color: #ffffff;
    // 头部
    .el-page-header{
        width: 95%;
        margin: 0 auto;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e8e9ea;
        /deep/ .el-page-header__left{
            margin-right: 0;
            margin-left: 10px;
            line-height: 40px;
           
        }
        /deep/ .el-icon-back{
            font-size: 20px;
        }
        /deep/ .el-page-header__title{
            font-size: 20px;
            font-weight: bold;
        }

        /deep/ .el-page-header__left::after{
            width: 0;
        }

        /deep/ .el-page-header__content{
            font-weight: 600;
            margin-right: 10px;
        }
        .operationPayrollTitle-content{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        /deep/ .el-page-header__content{
            width: 100%;
        }
    }
}
</style>